<template>
  <view>
    <view class="notic_title">
      <view class="wei" :class="index==1?'active':''" @click="chgindex(1)">
        商业贷款
      </view>
      <view class="wei" :class="index==2?'active':''" @click="chgindex(2)">
        公积金贷款
      </view>
      <view class="wei" :class="index==3?'active':''" @click="chgindex(3)">
        组合贷款
      </view>
    </view>
    <calc-com v-if="index==1" @show="getcalcList" @rest="resetList"></calc-com>
    <calc-fount v-if="index==2" @show="getcalcList" @rest="resetList"></calc-fount>
    <calc-all v-if="index==3" @show="getcalcList" @rest="resetList"></calc-all>
    <view class="title">
      <!-- customStyle="margin-bottom: 10px" -->
      <u-row>
        <u-col span="2">
          <view class="title">期次</view>
        </u-col>
        <u-col span="3">
          <view class="title">本息</view>
        </u-col>
        <u-col span="3">
          <view class="title">利息</view>
        </u-col>
        <u-col span="3">
          <view class="title">偿还本金</view>
        </u-col>
        <u-col span="3">
          <view class="title">剩余本金</view>
        </u-col>
      </u-row>
      <u-row v-for="(item,index) in calcList" :key="index">
        <u-col span="2">
          <view class="text">{{index+1}}</view>
        </u-col>
        <u-col span="3">
          <view class="text">{{item.per_all}}</view>
        </u-col>
        <u-col span="3">
          <view class="text">{{item.per_interest}}</view>
        </u-col>
        <u-col span="3">
          <view class="text">{{item.per_base}}</view>
        </u-col>
        <u-col span="3">
          <view class="text">{{item.per_rest}}</view>
        </u-col>
      </u-row>
    </view>

  </view>
</template>

<script>
import calcCom from './calc_com.vue'
import calcFount from './calc_fount.vue'
import calcAll from './calc_all.vue'
export default {
  components: {
    calcAll,
    calcCom,
    calcFount
  },
  data() {
    return {
      index: 1,
      calcList: []
    }
  },
  methods: {
    chgindex(i) {
      this.index = i
    },
    getcalcList(data) {
      console.log(data)
      this.calcList = data.detail
    },
    // 重置列表
    resetList() {
      this.calcList = []
    }
  }
}
</script>

<style lang="scss">
.notic_title {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .wei {
    display: flex;
    padding: 0rpx 40rpx;
    border-bottom: 8rpx solid transparent;
  }

  .active {
    color: #00f;
    border-bottom: 8rpx solid #00f;
  }
}
.u-row {
  background-color: #fff;
  .title {
    text-align: center;
    border: 1px solid #ccc;
    font-weight: 700;
  }
  .text {
    text-align: center;
    border: 1px solid #ccc;
  }
}
</style>
